import * as React from 'react';
import { cnc } from '../../../util';
const style = require('./style.scss');

interface Props {
  className: string;
  colorful?: boolean;
}

export const MicrosoftSvg: React.StatelessComponent<Props> = (props) => (
  <svg
    className={`${style.logo} ${props.className}`}
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    x="0px"
    y="0px"
    viewBox="0 0 470 108"
    xmlSpace="preserve"
  >
    <g>
      <path className={style.text} d="m243.154,47.565c4.144,-0.521 8.277,1.053 11.536,3.536c0.03,-3.214 -0.025,-6.429 0.03,-9.64c-0.904,-0.529 -1.877,-0.918 -2.882,-1.198c-4.875,-1.375 -10.136,-1.431 -15.013,-0.045c-4.477,1.288 -8.585,4.029 -11.212,7.901c-3.135,4.538 -4.243,10.207 -3.997,15.642c0.244,5.229 2.31,10.446 6.116,14.106c3.502,3.394 8.328,5.222 13.166,5.477c4.729,0.232 9.682,-0.4 13.814,-2.854c-0.037,-3.043 0.006,-6.087 -0.022,-9.13c-2.663,1.942 -5.773,3.334 -9.068,3.713c-3.335,0.251 -6.907,-0.549 -9.455,-2.809c-2.453,-2.086 -3.758,-5.229 -4.084,-8.377c-0.435,-4.021 0.149,-8.386 2.678,-11.673c1.968,-2.65 5.104,-4.352 8.393,-4.649zm-34.141,-25.211c-2.807,0.319 -5.201,2.864 -5.125,5.72c-0.118,2.713 2.069,5.146 4.693,5.617c2.529,0.551 5.43,-0.516 6.727,-2.812c1.173,-2.035 0.882,-4.808 -0.702,-6.549c-1.35,-1.59 -3.556,-2.284 -5.593,-1.976zm-27.805,1.282c-5.84,14.501 -11.81,28.944 -17.695,43.425c-1.227,-2.876 -2.321,-5.807 -3.491,-8.704c-4.58,-11.589 -9.189,-23.166 -13.763,-34.754l-14.698,0c-0.006,19.598 -0.003,39.197 0,58.796c3.205,-0.003 6.413,0.005 9.621,-0.003c-0.008,-8.774 0,-17.549 -0.002,-26.324c0.034,-6.336 -0.07,-12.678 0.053,-19.013c0.182,0.287 0.351,0.587 0.508,0.896c5.995,14.813 11.945,29.649 17.97,44.452c2.422,-0.039 4.844,0.042 7.264,-0.045c5.807,-14.816 11.759,-29.577 17.6,-44.38c0.155,-0.324 0.332,-0.638 0.531,-0.94c0.045,0.649 0.067,1.299 0.062,1.949c-0.019,14.464 0.02,28.925 -0.016,43.386c3.398,0.048 6.797,0.011 10.199,0.02c-0.003,-19.596 -0.008,-39.192 0.003,-58.788c-4.718,0.009 -9.434,-0.048 -14.146,0.027zm96.111,17.268c-2.534,1.432 -4.143,3.979 -5.223,6.603c0.009,-2.414 -0.006,-4.824 0.009,-7.235c-3.326,-0.016 -6.652,-0.033 -9.979,0.009c0.02,14.039 0,28.08 0.009,42.118l9.964,0c0.002,-6.717 0,-13.434 0,-20.151c-0.082,-2.917 0.159,-5.935 1.439,-8.603c1.178,-2.521 3.451,-4.718 6.32,-5.043c2.352,-0.238 4.838,0.313 6.831,1.602c0.008,-3.363 -0.006,-6.725 0.008,-10.088c-3.044,-1.022 -6.589,-0.883 -9.378,0.788zm-72.513,-0.633c0.009,14.044 -0.002,28.086 0.006,42.127l10.033,0c0.014,-14.036 -0.022,-28.073 0.017,-42.109c-3.351,-0.064 -6.705,-0.031 -10.056,-0.018zm151.683,19.158c-2.97,-1.714 -6.388,-2.525 -9.253,-4.438c-1.676,-1.062 -2.149,-3.386 -1.465,-5.158c0.861,-1.791 2.938,-2.59 4.827,-2.662c3.75,-0.132 7.524,1.008 10.614,3.128c-0.003,-3.089 0.003,-6.177 -0.003,-9.268c-4.423,-1.672 -9.314,-2.273 -13.988,-1.453c-3.948,0.702 -7.824,2.749 -10.056,6.162c-1.953,2.929 -2.205,6.705 -1.397,10.057c0.545,2.273 1.937,4.289 3.775,5.72c2.615,2.002 5.745,3.119 8.723,4.455c1.586,0.745 3.267,1.504 4.412,2.88c1.224,1.788 0.853,4.708 -1.208,5.729c-2.151,1.03 -4.664,1.013 -6.974,0.639c-3.317,-0.571 -6.452,-1.98 -9.17,-3.948c-0.036,3.248 -0.002,6.496 -0.016,9.746c3.229,1.434 6.761,2.125 10.274,2.353c4.948,0.185 10.328,-0.779 14.063,-4.262c3.913,-3.449 4.855,-9.562 2.63,-14.187c-1.182,-2.47 -3.45,-4.184 -5.788,-5.493zm44.361,-17.916c-4.603,-2.319 -9.957,-2.657 -15,-2.033c-4.067,0.521 -8.063,2.061 -11.168,4.779c-3.789,3.257 -6.012,8.044 -6.666,12.941c-0.623,4.896 -0.412,10.054 1.589,14.637c1.92,4.497 5.708,8.148 10.267,9.937c4.498,1.768 9.5,1.965 14.234,1.201c4.842,-0.797 9.428,-3.337 12.425,-7.246c3.203,-4.037 4.58,-9.262 4.571,-14.352c0.07,-3.407 -0.355,-6.862 -1.571,-10.063c-1.555,-4.182 -4.667,-7.799 -8.681,-9.801zm-0.435,24.087c-0.388,2.218 -1.156,4.429 -2.612,6.185c-1.469,1.764 -3.652,2.839 -5.906,3.169c-2.419,0.361 -4.967,0.188 -7.229,-0.784c-2.441,-1.03 -4.333,-3.138 -5.329,-5.563c-1.199,-2.889 -1.438,-6.09 -1.199,-9.18c0.23,-2.994 1.081,-6.065 3.063,-8.392c1.808,-2.172 4.58,-3.373 7.376,-3.53c2.854,-0.198 5.902,0.46 8.097,2.383c2.023,1.675 3.144,4.183 3.657,6.708c0.576,2.961 0.57,6.026 0.082,9.004zm-80.649,-24.404c-4.501,-2.044 -9.618,-2.318 -14.468,-1.703c-5.094,0.642 -10.053,3.032 -13.286,7.084c-2.953,3.617 -4.39,8.265 -4.664,12.876c-0.408,5.436 0.502,11.202 3.701,15.738c2.726,3.914 7.027,6.604 11.676,7.596c3.884,0.814 7.947,0.817 11.832,0.011c4.544,-0.932 8.787,-3.44 11.603,-7.142c2.75,-3.485 4.131,-7.882 4.442,-12.269c0.317,-4.494 -0.138,-9.148 -2.01,-13.291c-1.754,-3.892 -4.919,-7.142 -8.826,-8.9zm-0.935,28.242c-0.966,2.167 -2.733,3.998 -4.965,4.866c-2.61,1 -5.543,1.059 -8.237,0.361c-2.742,-0.719 -5.068,-2.696 -6.334,-5.214c-1.629,-3.241 -1.872,-6.99 -1.536,-10.546c0.307,-3.234 1.435,-6.56 3.904,-8.792c1.792,-1.668 4.233,-2.483 6.649,-2.618c3.036,-0.198 6.27,0.658 8.452,2.861c2.336,2.291 3.239,5.613 3.489,8.783c0.181,3.47 0.037,7.085 -1.422,10.299zm145.167,-20.993l0,-8.188c-3.334,0.012 -6.669,-0.025 -10,0.022c-0.076,-4.208 -0.009,-8.416 -0.037,-12.621c-3.334,1.002 -6.648,2.069 -10,3.021c-0.08,3.192 -0.005,6.387 -0.042,9.578c-4.928,-0.002 -9.856,0.006 -14.785,-0.005c0.063,-2.515 -0.173,-5.048 0.188,-7.549c0.3,-1.971 1.445,-3.941 3.371,-4.704c2.428,-0.993 5.142,-0.333 7.448,0.681c-0.014,-2.881 0.022,-5.762 -0.02,-8.64c-4.854,-1.333 -10.421,-1.072 -14.729,1.725c-2.778,1.774 -4.794,4.614 -5.7,7.761c-1.071,3.486 -0.525,7.168 -0.696,10.745c-2.338,-0.016 -4.673,-0.039 -7.005,0.015c0.024,2.693 0.015,5.387 0.006,8.077c2.343,0.048 4.688,-0.009 7.032,0.037c-0.02,11.333 -0.005,22.664 -0.005,33.998l10.106,0c0,-11.337 -0.003,-22.674 0.002,-34.01c4.929,-0.008 9.86,-0.006 14.792,-0.003c0.014,7.227 -0.015,14.45 0.011,21.674c0.045,3.364 0.62,6.963 2.854,9.619c1.935,2.353 5.004,3.428 7.968,3.646c3.124,0.221 6.352,-0.16 9.24,-1.411l0,-8.269c-2.215,1.479 -5.273,2.066 -7.686,0.72c-1.438,-0.792 -1.998,-2.489 -2.183,-4.021c-0.306,-2.599 -0.112,-5.219 -0.166,-7.826c-0.003,-4.708 0.009,-9.415 -0.005,-14.122c3.347,0.013 6.695,-0.087 10.041,0.05z"/>
    </g>
    <g>
      <path className={cnc(style.sq1, props.colorful && style.colorful)} d="m4.002,4.003l0,46.617l46.726,0c0.003,-15.539 0,-31.078 0.003,-46.617l-46.729,0z"/>
    </g>
    <g>
      <path className={cnc(style.sq2, props.colorful && style.colorful)} d="m4.002,55.377l0,46.62l46.729,0c0,-15.539 0.003,-31.075 0,-46.614c-15.576,-0.008 -31.152,0 -46.729,-0.006z"/>
    </g>
    <g>
      <path className={cnc(style.sq3, props.colorful && style.colorful)} d="m55.506,55.383c-0.006,15.536 0,31.075 -0.003,46.614l46.729,0l0,-46.617c-15.577,0 -31.153,-0.003 -46.726,0.003z"/>
    </g>
    <g>
      <path className={cnc(style.sq4, props.colorful && style.colorful)} d="m55.503,4.003c0,15.539 -0.003,31.078 0.003,46.617c15.573,0 31.149,-0.003 46.723,0c0.006,-15.539 0.003,-31.078 0.003,-46.617l-46.729,0z"/>
    </g>
  </svg>
)
